<template>
  <!-- 上传图片 -->
  <div class="upload-cover">
    <div class="cover-wrap" @click="openUploadDialog">
      <!--
          v-model="articleForm.cover.images[index]" 需要把子组件传递的值绑定到表单对象中，发表文章接口用
          页面中展示的图片应该是有articleForm传递过去的值，必须得用父子组件之间的通讯，
          不能直接由子组件<upload-cover/> 中控制图片，否则在单图，三图切换的时候
          该<upload-cover/>子组件内的数据都被清空了，导致父组件的图片不会显示出来
          src不需要绑定value的值，value有父组件v-model通过props属性传递给子组件
          -->
      <img class="cover-image" :src="value" />
    </div>
    <el-dialog title="选择封面" append-to-body :visible.sync="dialogVisible">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="first">
          <image-list :upload-btn="false" ref="imageListRef"/>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="second">
          <input ref="uploadInp" type="file" @change="onFileChange" />
          <div class="image-box">
            <img width="200" :src="uploadImage" />
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onCoverConfirm" :loading="isUploading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
  <!-- 上传图片 -->
</template>

<script>
import { uploadImg } from "@/api/images";
import ImageList from "@/components/images-list.vue";
export default {
  name: "Upload",
  props: ["value"],
  components: {
    ImageList
  },
  data() {
    return {
      // 上传组件的data
      // imgUrl: "", // 上传之后image的http地址，页面上展示的地址
      dialogVisible: false,
      activeName: "first",
      uploadImage: "", // input file框选中图片文件之后通过URL路径展示的图片地址，展示在弹框中的，此时还没有上传到服务器，不是http的地址
      isUploading: false, // 图片上传中
    };
  },
  methods: {
    // 点击封面图片打开弹框
    openUploadDialog() {
      this.dialogVisible = true;
      this.uploadImage = "";
      this.$nextTick(() => {
        if (this.$refs.uploadInp.files[0]) {
          this.$refs.uploadInp.value = null;
        }
      });
    },
    // input file 监听图片改变
    onFileChange() {
      const file = this.$refs.uploadInp.files[0];
      this.uploadImage = window.URL.createObjectURL(file);
    },
    // 点击确定按钮，发送请求，上传图片
    onCoverConfirm() {
      this.isUploading = true;
      if (this.activeName === "second") {
        const file = this.$refs.uploadInp.files[0];
        if (!file) return this.$message.error("请选择图片");
        const fd = new FormData();
        fd.append("image", file);
        uploadImg(fd).then((res) => {
          if (res.status !== 201) this.$message.error("上传图片失败，稍后再试");
          this.dialogVisible = false;
          this.isUploading = false;
          this.$emit("input", res.data.data.url); // 纯粹的子组件传值给父组件是不需要发射input事件的
        });
      } else if (this.activeName === "first") {
        const imageList = this.$refs.imageListRef
        const selected = imageList.selected
        if (selected === null) return this.$message.error('请先选择素材图片')
        this.dialogVisible = false
        this.$emit('input', imageList.imageList[selected].url)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.cover-wrap {
  width: 150px;
  height: 120px;
  border: 1px solid #000;
  .cover-image {
    height: 120px;
    max-width: 100%;
  }
}
.image-box {
  img {
    margin-top: 20px;
  }
}
</style>
